/**
* @description: 单月巡视巡检工单 - 未完成/已完成详情
* @author: zhangxia
* @date:
**/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back :title="titleName" @goBack="goBack" />
		<!-- banner -->
		<view class="top-banner">
			<view class="left-banner">
				<text
					class="left-banner-title">{{headerMsg.userName}}分配的{{headerMsg.distributionTime}}{{headerMsg.workOrderType}}</text>
				<text class="left-banner-time">网管执行人员：{{headerMsg.ExecutiveList}}</text>
				<text class="left-banner-time optitle">运维专责：{{headerMsg.expertPersonName}}</text>
			</view>
			<view :class="stateColor">{{titleName}}</view>
		</view>
		<!-- main   -->
		<main class="mainClassName">
			<view class="commontitle">
				处理详情
				<view class="tabbartitlelist">
					<view :class="{'active':key==active}" v-for="(item,key) in tabbarTitleList" :key="key">
						<text :class="item.status=='0'?'exceedtime':item.status=='1'?'executed':'finished'"></text>
						{{item.name}}
					</view>
				</view>
			</view>
			<div class="commonbj">
				<view class="tabbarlist">
					<view :class="key==active?'active tabbarlistitem' :'tabbarlistitem'" @click="changetab(key)" v-for="(item,key) in tabbarList" :key="key">
						<text :class="color(item.status)"></text>
						{{item.name}}
					</view>
				</view>
				<van-tabs v-model="active" type="card" class="select_content_tabs">
					<van-tab v-for="(item,key) in inspectionList" :key="key">
						<view class="contentbj">
							<div class="commonbj">
								<van-field v-model="item.inspectionNum" label="巡视次数" input-align="right" readonly
									error-message-align="right">
									<template #right-icon>
										<view class="round-title">{{item.inspectionStartDate}}</view>
									</template>
								</van-field>
								<van-field v-model="item.executionPersonName || '--'" label="网管执行人员" input-align="right" readonly />
								<van-field v-model="item.executionTime || '--' " label="巡视时间" input-align="right" readonly />
							</div>
							<div class="commonbj">
								<van-field v-model="item.leaveTime || '--'" label="离开时间" readonly input-align="right" />
							</div>
							<div class="commonbj" v-if="item.inspectionState!=2">
								<van-collapse v-model="activeName" accordion label-class="wggrade">
									<van-collapse-item name="grade" size="large">
										<template #title>
											<view>
												<text style="font-size: 14px;">国网等级</text>
											</view>
										</template>
										<van-collapse v-model="item.activeNames" v-for="(gradeitem,gradeindex) in item.alarm"
											:key="gradeindex">

											<van-collapse-item  :name="gradeitem.ID" size="large">
												<template #title>
													<view>
														<text
															style="font-size: 14px;color: #417ADC;">{{ gradeitem.NAME }}</text>
													</view>
												</template>
												<template v-for="(ite,index1) in gradeitem.child" >
													<van-field :label="ite.NAME"  input-align="right">
														<template #input>
															<van-radio-group v-model="ite.alarmState"
																direction="horizontal">
																<van-radio name="0" disabled>正常
																	<template #icon="props">
																		<img class="img-icon"
																			:src="props.checked ? activeIcon : inactiveIcon"
																			alt="">
																	</template>
																</van-radio>
																<van-radio name="1" disabled>异常
																	<template #icon="props">
																		<img class="img-icon"
																			:src="props.checked ? selectIcon : inactiveIcon"
																			alt="">
																	</template>
																</van-radio>
															</van-radio-group>
														</template>
													</van-field>
													<view v-if="ite.alarmState ==='1'">
														<van-collapse v-model="activePolice">
															<van-collapse-item :name="ite.ID" size="large">
																<template #title>
																	<view style="float: left;">
																		<text
																			style="font-size: 14px;">{{ titlePolice }}</text>
																	</view>
																</template>
																<view class="police-main"
																	 v-for="(alitem,alkey) in ite.alarmList" :key="alkey">
																	<view class="police-top">
																		<text
																			class="police-title">告警{{alkey*1+1}}</text>
																	</view>
																	<view class="police-small-title">告警照片:（最多上传3张）</view>
																		<ul class="plice-img">
																		 <li v-for="(item,index) in alitem.files" :key="index">
																		    <img v-if="item.img" :src="item.img" alt="" @click="imageHandle(item)"/>
																		  </li>
																		</ul>
																	<van-divider dashed />
																	<view class="remark-info-container">
																		<text class="remark-title">告警信息</text>
																		<div class="remark-wrap">
																			
																				<van-field
																				  v-model="alitem.explain"
																				  autosize
																				  label=""
																				  type="textarea"
																				  placeholder="这里是告警信息"
																				  readonly
																				   v-if="alitem.state==='0' || alitem.state==='1'"
																				/>
																				<van-field
																				  v-model="alitem.explain"
																				  autosize
																				  label=""
																				  type="textarea"
																				  placeholder="这里是告警信息"
																				   v-else
																				/>
																		</div>
																	</view>
																</view>
															</van-collapse-item>
														</van-collapse>
													</view>
												</template>

											</van-collapse-item>

										</van-collapse>
									</van-collapse-item>
								</van-collapse>
							</div>

						</view>
					</van-tab>

				</van-tabs>
			</div>
			<div class="commonbj" v-if="titleName !== '待执行'">
				<view class="commontitle detailTitle">审核详情</view>
				<van-field v-model="headerMsg.expertPersonName" label="审核人员" input-align="right" readonly />
				<van-field v-model="headerMsg.approveState" label="审核状态" input-align="right" readonly />
				<van-field v-model="headerMsg.approveDate" label="审核时间" input-align="right" readonly />
				<van-field v-model="headerMsg.approveContent" label="审核意见" input-align="right" readonly />
			</div>
			<!-- footer   -->
			<footer v-if="titleName ==='待审批' && this.prevPage !== 'monitoring' && this.prevPage !== 'workorderpending'">
			  <van-button block native-type="submit" @click="goApproval">审批</van-button>
			</footer>
			<!-- 弹出审批页 -->
			<van-popup
			    closeable
			    :close-on-click-overlay="false"
			    v-model="showApproval"
			    position="bottom"
			>
			  <toApprove @submitApproval="submitApproval" :isChangeRadio="false"></toApprove>
			</van-popup>
		</main>
		<van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
		  <van-swipe>
		    <div v-for="(image, index) in files" :key="index">
		      <van-swipe-item v-if="image.img" style="text-align: center;">
		        <img :src="image.img" />
		      </van-swipe-item>
		    </div>
		  </van-swipe>
		</van-popup>
	</view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue'
import wx from "../../../static/common_js/jweixin_1.0.0";
import config from "../../../common/config";
import moment from "moment"
import {mapGetters} from "vuex";
import toApprove from '../common/toApprove.vue'
import {Dialog} from "vant";
export default {
	name: 'networkTeamIncomplete',
	components: {
		navBar,
		plateTitle,
		toApprove
	},
	props: {},
	data() {
		return {
			test:'/image/kosinManage/appWgxsxjPrefix\\20230404\\1680600379699.jpeg',
			 files: {},
			showPreview:false,
			baseUrl:'',
			titlePolice: "告警内容",
			statusDetails: false,
			titleName: "未完成",
			stateCode: "0",
			activeIcon: require('../../../static/img/zcxz.png'),
			inactiveIcon: require('../../../static/img/wx.png'),
			selectIcon: require('../../../static/img/ycxz.png'),
			showApproval:false,
			headerMsg: {
				userName: '田明明',
				distributionTime: "2022-03-10",
				workOrderType: "通信网管巡视巡检工单",
				ExecutiveList: ["张三", "李四"]
			},
			active: 0,
			statusName: '',
			tabbarTitleList: [
				// {
				// 	name: "待执行",
				// 	status: 0
				// }, 
			{
				name: "已逾期",
				status: 1
			}, {
				name: "已执行",
				status: 2
			}],
      color: (status) => {
        if (status === '0') {
          return 'circle-yx icon'
        } else if (status === '2') {
          return 'circle-ex icon'
        } else {
          return 'circle-sx icon'
        }
      },
			inspectionList:[],
			tabbarList: [{
				name: "一巡",
				status: 0
			}, {
				name: "二巡",
				status: 1
			}, {
				name: "三巡",
				status: 2
			}],
			roundsNum: '一巡',
			roundsNums: '二巡',
			roundsNumss: '三巡',
			executive: '张三',
			patrolTime: '',
			leaveTime: '',
			gradeList: [],
			activeName: "grade",
			activeNames: [],
			activePolice: ['1'], // 三级折叠框
			policeList: [{
				title: '告警内容', //一级折叠框标题
				name: '1',
				smallTitle: '告警1'
			}],
			prevPage:''

		};
	},
	computed: {
		...mapGetters(['userData']),
		stateColor() {
			if (this.stateCode === '0') {
				return 'left-state-ywc'
			} else if (this.stateCode === '1') {
				return 'left-state-dzx'
			}else if (this.stateCode === '2') {
				return 'left-state-dsp'
			}
		},
		 
	},
	watch: {},
	onLoad(option) {
		
		this.prevPage = option.pageType ? option.pageType : '';
		
		config.getOptions.then(res => {
		  this.baseUrl = res.firstUrl;
		})
		this.titleName = option.status == 2 ? '已完成' : option.status == '0' ? '待执行' : '待审批';
		this.stateCode = option.status == '2' ? '0' :option.status =='0'? '1' : '2';
		
		this.getSingleMonthPatrolDetail(option.date)
	},
	mounted() {

	},

	methods: {
		//  去审批
		submitApproval(approval) {
		 
		let params = {
			"userId": this.userData.USERID, // 是	string	登录用户ID
			"username": this.userData.SUERNAME, // 是	string	登录用户名称
			"modeType" : "WGXS" ,
			"explain": approval.determineResult,
			"ids": [this.headerMsg.distributionTime]
		}
		  
		  Dialog.confirm({
		    message:'是否确认审批'
		  }).then(() => {
		    this.$api.examineSeal(params).then(res => {
		      if(res.code == 0) {
		      
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2];//上级页面
				prevPage.isRefresh=true
				uni.navigateBack()
		      }
		    })
		  })
		},
		goApproval() {
		    this.showApproval = true;
		},
		imageHandle (imgItem) {
			this.files = [imgItem];
		    this.showPreview = true;
		},
		getSingleMonthPatrolDetail(date) {
			let params = JSON.stringify({
			  date
			})
			this.$api.getSingleMonthPatrolDetail(params).then(res => {
				const msg = res.data;
				let dataList = msg.dataList,tabbarList = [];
				this.inspectionList = dataList;
				//详情页头部基本信息集合
				this.headerMsg = {
					userName: msg.assignPersonnelName,
					distributionTime: msg.inspectionDay,
					workOrderType: msg.name,
					ExecutiveList: msg.executiveName,
					expertPersonName:msg.expertName ? msg.expertName : '--',
					approveState:msg.approveState === '2' ? "已审核" : '--',
					approveContent:msg.approveContent ? msg.approveContent : '--',
					approveDate:msg.approveDate ? moment(msg.approveDate).format("YYYY-MM-DD HH:mm") :'--'
				};
				dataList.forEach((item)=>{
					tabbarList.push({
						name: item.inspectionNum,
						status: item.inspectionState
					})
					this.activeNames.push(item.ID);
				})
				//切换一巡 二巡 三巡 数据
				this.tabbarList = tabbarList;
				//巡检内容总数据
				dataList.map((item1,index1,arr1)=>{
					arr1[index1].activeNames = arr1[index1].alarm !==null && [...arr1[index1].alarm.map((alarmitem)=> alarmitem.ID)];
					arr1[index1].inspectionStartDate = moment(arr1[index1].inspectionStartDate).format("H:m");
					arr1[index1].leaveTime = arr1[index1].leaveTime === null ? '--' : moment(arr1[index1].leaveTime).format("YYYY-MM-DD HH:mm:ss");
					arr1[index1].executionTime = arr1[index1].executionTime === null ? '--' : moment(arr1[index1].executionTime).format("YYYY-MM-DD HH:mm:ss");
					arr1[index1].alarm !==null && arr1[index1].alarm.map((ites,index2,arr2)=>{
							this.activeNames.push(ites.ID)
							arr2[index2].child.map(citem => {
								citem.alarmList.map(itemF => {
									
									itemF.files.map((itImg,index,array) => {
										array[index].img = itImg.img ? this.baseUrl + itImg.img : ''
									  return {
										...itImg,
									  }
									 
									})
									return {...itemF};
							    })
							    return citem
							})
							return ites
					})
					return item1
				});
				this.inspectionList = JSON.parse(JSON.stringify(dataList))
			})

		},
		changetab(tabindex) {
			this.active = tabindex;
		}, // 返回
		goBack() {
			// uni.navigateBack()
			if(this.prevPage === 'monitoring'){
				uni.navigateTo({
					url:'/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMemberList'
				})
			}else if( this.prevPage ==='workorderpending'){
				uni.navigateTo({
					url:'/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMember'
				})
			}else{
				uni.navigateBack()
			}
			
		},
	}
};
</script>
<style scoped lang="scss">
.task-monitor-main {
	height: 100vh;
	background: #F2F6FA;
	display: flex;
	flex-direction: column;
	.top-banner {
		width: px2vw(1080);
		height: px2vh(300);
		flex-shrink: 0;
		background: #fff;
		margin-bottom: px2vw(30);
		display: flex;

		.left-banner {
			flex: 1;
			margin-top: px2vh(47);
			height: px2vh(98);
			float: left;
			margin-left: px2vh(50);
			margin-right: px2vh(10);
			.left-banner-title {
				display: block;
				font-size: px2vw(42);
				color: #417ADC;
			}

			.left-banner-time {
				font-size: px2vw(36);
				color: #666;
			}
			.optitle{
				display: block;
			}

		}

		.left-state-dsp,
		.left-state-ywc,
		.left-state-jj,
		.left-state-dzx,
		.left-state-ycx {
			flex-shrink: 0;
			width: px2vw(220);
			height: px2vh(80);
			margin-right: px2vh(30);
			margin-top: px2vh(55);
			float: right;
			font-size: px2vw(42);
			font-weight: 700;
			border-radius: px2vw(40);
			text-align: center;
			line-height: px2vh(80);
		}

		.left-state-ywc {
			color: #3CDA68;
			background: rgba(60,218,104,.1);
		}

		.left-state-dsp {
			color: #FFAD0E;
			background: rgba(255, 173, 14, .1);
		}

		.left-state-jj {
			color: #FF7070;
			background: rgba(255, 112, 112, .1);
		}

		.left-state-dzx {
			color: #417ADC;
			background: rgba(65, 122, 220, 0.1);
		}

		.left-state-ycx {
			color: #8C8C8C;
			background: rgba(140, 140, 140, .1);
		}
	}

	.plate-title {
		margin-left: px2vw(30);
		margin-bottom: px2vh(30);
	}

	main {
		flex: 1;
		width: calc(100% - #{px2vw(60)});
		margin-left: px2vw(30);
		// height: calc(100vh - #{px2vh(353)});
		overflow-y: scroll;

		.tabbartitlelist {
			font-size: px2vh(36);
			color: #666666;
			float: right;

			view {
				display: inline-block;
				margin-right: px2vh(20);

				text {
					width: px2vh(30);
					height: px2vh(30);
					display: inline-block;
					margin-right: px2vh(14);
				}

				text.executed {
					background: #FFAD0E;
				}

				text.exceedtime {
					background: #FF4355;
				}

				text.finished {
					background: #41DC83;
				}
			}
		}

		.commonbj {

			background-color: #fff;
			margin-bottom: px2vh(30);

			.round-title {
				width: px2vh(110);
				height: px2vh(50);
				line-height: px2vh(50);
				font-size: px2vh(36);
				text-align: center;
				color: #417ADC;
				border-radius: px2vh(10);
				background: rgba(65, 122, 220, .1)
			}

			.img-icon {
				height: px2vh(40);
			}

			.select_content_tabs {
				.commonbj {
					background-color: #fff;
					margin-bottom: px2vh(30);

					/deep/.van-collapse-item__content {
						padding: 0 px2vh(30);
					}
				}

				/deep/.van-tabs__wrap {
					display: none !important;

				}

				/deep/.van-tabs__content {
					margin-top: px2vh(100);
				}

				/deep/.van-field__label {
					// flex: 1;
					width: 10em;
				}

				/deep/.van-radio--horizontal:last-child {
					margin-right: 0;
				}
				

			}

			.contentbj {
				background-color: #F2F6FA;


			}

			.tabbarlist {
				height: px2vh(100);
				width:calc(100% - #{px2vw(60)});
				// width: px2vh(920);
				border-radius: px2vh(20);
				margin: 0 auto;
				display: flex;

				.tabbarlistitem {
					flex: 1;
					flex-shrink: 0;
					// width: px2vh(305);
					width: calc(100% - #{px2vw(60)}/3);
					height: px2vh(100);
					margin-top: px2vh(50);
					line-height: px2vh(100);
					display: inline-block;
					text-align: center;
					color: #417ADC;
					font-size: px2vh(40);
					background-color: rgba(65, 122, 220, 0.1);
					border-right: px2vh(1) solid #C9CED6;

					.icon {
						width: px2vh(30);
						height: px2vh(30);
						display: inline-block;
						margin-right: px2vh(14);
					}

					text.executed {
						background: #FFAD0E;
					}

					text.exceedtime {
						background: #FF4355;
					}

					text.finished {
						background: #41DC83;
					}
				}
        .circle-yx {
          width: px2vw(30);
          height: px2vh(30);
          background: #FF4355;
        }
        .circle-ex {
          width: px2vw(30);
          height: px2vh(30);
          background: #FFAD0E;
        }
        .circle-sx {
          width: px2vw(30);
          height: px2vh(30);
          background: #41DC83;
        }
				view:last-child {
					border-right: none;
				}

				.active {
					color: #FFFFFF;
					background: #417ADC;
				}
			}

			.custom-title {
				display: flex;
				align-items: center;

				img {
					width: px2vh(42);
					margin-right: px2vw(29);
				}
			}
		}

		.commontitle {
			font-size: px2vh(40);
			color: #666666;
			font-weight: bold;
			margin-top: px2vh(60);
			margin-bottom: px2vh(27);
		}
		.detailTitle::before{
			content: '';
			width: px2vh(10);
			height: px2vh(36);
			display: inline-block;
			background-color: #417ADC;
			margin-top: px2vh(40);
			margin-left: px2vh(30);
			margin-right: px2vh(20);
		}
		.police-main {
			width: px2vw(850);
			height: auto;
			background: #f5f5f5;
			border-radius: px2vh(10);
			margin-bottom: px2vh(20);
			padding: 0 px2vh(40) px2vh(40);

			.police-top {
				height: px2vh(40);
				padding-top: px2vh(55);
				padding-bottom: px2vh(55);
				margin: auto;
				border-bottom: px2vh(1) solid #E5E5E5;
				margin-bottom: px2vh(20);

				.police-title {
					color: #666;
					margin-left: px2vw(69);
				}

				.police-img {
					height: px2vh(40);
					float: right;
					margin-right: px2vw(40);
				}
			}

			.police-small-title {
				color: #666;
				font-size: 14px;
				margin-left: px2vw(69);
				margin-bottom: px2vh(20);

			}
			.plice-img {
			  width: calc(100% - #{px2vw(104)});
			  height: px2vh(215);
			  margin-left: px2vw(20);
			  li {
			    width: px2vw(215);
			    height: px2vh(215);
			    float: left;
			    margin-right: px2vw(50);
			    img{
			      width: px2vw(215);
				  height: px2vw(215);

			      // height: auto;
			    }
			  }
			  li:last-child {
			    margin-right: 0;
			  }
			}
			.image-wrap{
				width:px2vh(215);
				height:px2vh(215);
				display: inline-block;
				text-align: center;
				line-height:px2vh(215);
			}
			// .image-wrap {
			// 	width: 100%;
			// 	display: flex;

			// 	img {
			// 		width: px2vw(215);
			// 		height: px2vw(215);
			// 		margin-right: px2vw(40);
			// 		border-radius: px2vw(6);
			// 	}



			// }
		}

		.remark-info-container {
			color: #666666;
			border-radius: px2vw(20);
			overflow: hidden;
			margin-top: px2vh(63);

			.remark-title {
				display: block;
				margin-left: px2vw(69);
				margin-bottom: px2vh(52);
			}

			.remark-wrap {
				width: px2vw(748);
				background-color: #E6E6E6;
				margin: auto;
				border-radius: px2vw(20);
				padding: px2vh(20);
				/deep/.van-cell{
					background:#E6E6E6
				}
				/deep/.van-field__control{
					text-align: left;
				}
				.remark-text {
					width: 100%;
					// padding: px2vh(20);
					height: px2vh(285);
				}
			}
		}

		.isrequired::before {
			content: "*";
			color: #FF4355;
			display: inline-block;

		}

		.approval-info-container {
			border-radius: $border-radius-base;
			overflow: hidden;
			background-color: #FFFFFF;

			/deep/ .van-cell__title {
				color: #666;
			}

			/deep/ .van-cell__value {
				color: #333;
			}
		}
		/deep/.van-radio-group--horizontal{
			flex-wrap: nowrap;
		}
		/deep/.van-radio{
			flex-wrap: nowrap;
		}
	}
	.van-preview-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		.van-swipe {
			width: 100%;
			height: 60%;
			.van-swipe-item {
				display: flex;
				align-items: center;
				img {
				  width: 100%;
				}
			}
		}
	}
	.mainHeight {
		height: calc(100vh - #{px2vh(675)});
	}
	footer {
	  height: px2vh(155);
	  background: #f2f6fa;
	  padding-top: px2vh(45);
	  /deep/ .van-button {
	    width: calc(100% - #{px2vw(60)});
	    margin-left: px2vh(30);
	    height: px2vh(120);
	    color: #fff;
	    background-color: #417ADC;
	    border: 1px solid #417ADC;
	    border-radius: px2vh(60);
	  }
	}

}
</style>
